<template>
	<view class="d-block tm-input overflow"
		  :class="[
		black_tmeme?'grey-darken-5 bk':'',
		bgTheme,
		
		flat?'':`px-${padding[0]}`,
		'round-'+ bgRound,
		`shadow-${color}-${bgShadow}`
	]"
	>
		<tm-sheet :margin="[0,0]" :padding="[0,0]" :black="black_tmeme" :round="0"
				  color=""
				  :classname="(flat?'':`  py-${padding[1]} `)+` ${borderBottom?black_tmeme?'border-grey-darken-5-b-1 ':'border-grey-lighten-4-b-1':''}`"
				  :shadow="0">
			<view @click="onclickInput" :class="[vertical?'tm-input-col':'flex-between ']" :style="{
				width: '100%',height: 'auto',
				alignItems:inputType=='textarea'?'flex-start':'center'
			}">
				<!-- 左边内容。 -->
				<view v-if="leftIcon||title" class="tm-input-left flex-start flex-shrink"
					  :class="[vertical?'pb-24':'']">
					<!-- icon -->
					<view class="pr-16 vertical-align-middle flex-center">
						<tm-icons dense v-if="leftIcon" :name="leftIcon" :color="color_tmeme"></tm-icons>
					</view>
					<!-- 标题 -->
					<view v-if="title" class="d-inline-block  "
						  :class="[`text-size-${titleFontSize}`,titleClass,black_tmeme?'bk  text-grey-lighten-3':'']">
						<text v-if="required" class="text-red">*</text>
						<slot name="default" :title="title">
							{{ title }}
						</slot>
					</view>
				</view>
				<view class="flex-between " :class="[disabled?'opacity-6':'',]" style="width: 100%;">

					<!-- input主体 -->
					<view class="tm-input-center relative fulled">
						<view class="flex-start  px-16 tm-input-center-wk"
							  :class="['round-'+round,
							black_tmeme?(bgColor?'grey-darken-4  text-grey-lighten-3':'text-grey-lighten-3'):bgColor,
							`text-${textColor}`,isFocus&&focusShow?(black_tmeme?`border-${color_tmeme}-a-1`:`${color_tmeme} outlined `):``,
							`border-${black_tmeme?(borderColor?'grey-darken-2':''):borderColor}-a-1`,
							
							]">
							<view class="flex-shrink pr-12 flex-center" v-if="prefixpIcon" style="line-height: 0;">
								<tm-icons dense :name="prefixpIcon" :size="28" :color="color_tmeme"></tm-icons>
							</view>
							<view class="flex-shrink pr-24 text-size-n"
								  :class="[titleClass,black_tmeme?'bk  text-grey-lighten-3':'']" v-if="prefixpText">
								{{ prefixpText }}
							</view>


							<input v-if="inputType!='textarea'" @confirm="$emit('confirm',$event)" @input="input"
								   @keyboardheightchange="$emit('keyboardheightchange',$event)" @blur="blur"
								   @focus="focusFun" :focus="focus_fs" :maxlength="maxlength"
								   :adjust-position="adjustPosition"
								   :auto-focus="autoFocus" :confirm-type="confirmType" :disabled="disabled"
								   :password="password" :type="inputType" :value="value" class="tm-input-center-input "
								   :class="['text-size-n','text-align-'+align,showError?'text-red':'',' py-5 ']"
								   :placeholder="placeholder"
								   :placeholder-class="black_tmeme? 'text-grey-darken-1 ':' text-grey-lighten-1 ' +` text-size-n `+ placeholderClass"
								   :style="{
								 	height:height+'rpx'
								 }"
							/>
							<!-- uniapp的bug，当输入框禁用时，点击此处来获取新的焦点，以让键盘收起。 -->
							<view v-if="disabled" class="absolute fulled t-0 r-0" :style="{
								 	height:height+'rpx'
								 }"></view>

							<textarea v-if="inputType=='textarea'" @confirm="$emit('confirm',$event)" @input="input"
									  @keyboardheightchange="$emit('keyboardheightchange',$event)" @blur="blur"
									  @focus="focusFun" :focus="focus_fs" :maxlength="maxlength"
									  :adjust-position="adjustPosition"
									  :auto-focus="autoFocus" :confirm-type="confirmType" :disabled="disabled"
									  :value="value" class="tm-input-center-input " :style="{
									height:height+'rpx'
								}"
									  :class="[maxlength>0?'pb-46':'','text-size-n','text-align-'+align,showError?'text-red':'','pt-10 fulled']"
									  :placeholder="placeholder"
									  :placeholder-class="black_tmeme? 'text-grey-darken-1 ':' text-grey-lighten-1 ' +` text-size-n `+ placeholderClass">	
							</textarea>
							<!-- 清除图标 -->
							<view v-if="clear&&valdata.length!=''" class="flex-center pl-16">
								<tm-icons @click.stop="clearVal" name="icon-times-circle-fill"
										  :color="color_tmeme"></tm-icons>
							</view>

							<view v-if="suffixIcon" class="flex-center">
								<tm-icons :size="26" :name="suffixIcon" :color="color_tmeme"></tm-icons>
							</view>
						</view>
						<view v-if="maxlength>0&&inputType=='textarea'"
							  :style="{bottom:'16rpx',right:'16rpx'}"
							  class="tm-input-center-numXz text-align-right text-size-xxs pt-12 text-grey absolute fulled">
							{{ valueLen }}/{{ maxlength }}
						</view>

					</view>
					<!-- 右边。 -->
					<view class="tm-input-right flex-end flex-shrink">
						<!-- 后缀文字，比如单位，等 -->
						<text v-if="suffix" class="text-size-n text-grey-darken-4 pl-10">{{ suffix }}</text>
						<!-- 后台图标。 -->
						<view v-if="rightIcon" class="pl-10" style="line-height: 0;">
							<tm-icons dense :name="rightIcon" color="grey-lighten-1"></tm-icons>
						</view>
						<!-- 插入的按钮等内容。 -->
						<slot name="rightBtn"></slot>
					</view>
				</view>


			</view>
			<!-- detail出错成功等信息。 -->
			<view v-if="showError" class="text-size-xs text-red pt-12">{{ errorText }}</view>
		</tm-sheet>
	</view>
</template>

<script>
/**
 * 输入框
 * @property {Number} maxlength = [-1] 默认：-1，最大输入字符数。
 * @property {Boolean} black = [] 默认：false，暗黑模式。
 * @property {Function} verify = [] 默认： (val) => {check: val.length <= 0 ? false : true,text: "必填项不能为空。"}，校验规则函数。
 * @property {String} title-class = [] 默认： text-grey-darken-4,自定左边标题或者上标题的类。
 * @property {Boolean} required = [] 默认： false, 是否是必填。如果必填写将会触发基础的校验，不能为空。
 * @property {Boolean} adjust-position = [] 默认： false, 是否上推键盘。
 * @property {Boolean} auto-focus = [] 默认： false, 自动获得焦点。
 * @property {String} confirm-type = [done|go|next|send|search] 默认： done, 键盘右下角确认按钮文字。
 * @property {Boolean} disabled = [] 默认： false, 禁用。
 * @property {Boolean} focus-show = [] 默认： false, 是否显示聚焦状态。
 * @property {Boolean} password = [] 默认： false, 密码模式
 * @property {String} input-type = [digit|text|number|password|idcard|textarea] 默认： text, 输入模式
 * @property {String} value = [] 默认： "", 输入内容，同v-model
 * @property {String} right-icon = [] 默认： "", 后缀图标
 * @property {String} left-icon = [] 默认： "", 外层前缀图标
 * @property {String} prefixp-icon = [] 默认： "", 输入框内部前缀图标
 * @property {String} suffix = [] 默认： "", 后缀文字
 * @property {String} suffix-icon = [] 默认： "", 输入框内后缀图标
 * @property {String} title = [] 默认： "", 左边标题。
 * @property {String} title-font-size = [xxs/xs/s/n/g/lg/xl] 默认： "n",同类的字号,xxs,xs,s,n,g,lg,xl
 * @property {String} align = [left|center|right] 默认： "", 输入框文字对齐方式。left,center,right
 * @property {Boolean} clear = [false|true] 默认： false, 显示清除图标。
 * @property {String} color = [] 默认： primary, 主题色名称
 * @property {String} bg-color = [grey-lighten-5|white] 默认： grey-lighten-5, 输入框背景色。
 * @property {String} border-color = [] 默认： "", 输入框边框类型主题颜色名称。
 * @property {Boolean} border-bottom = [false|true] 默认： true, 是否显示下划线
 * @property {String} text-color = [black|primary] 默认： black, 输入框文字颜色。
 * @property {String} placeholder = [] 默认： 请输入, 占位文字
 * @property {Boolean} vertical = [false|true] 默认： false, 是否上下排列
 * @property {Number} round = [] 默认： 2, 输入框圆角。
 * @property {Number} bg-round = [] 默认： 0, 整体框圆角。
 * @property {Number} bg-shadow = [] 默认： 0, 整体框投影。
 * @property {String} bg-theme = [] 默认：white, 整体框背景
 * @property {Boolean} flat = [] 默认： false, 是否去除所有边框
 * @property {Number|String} height = [] 默认： 68,
 * @property {String} name = [] 默认：''，提交表单时的的字段名称标识
 * @property {String} prefixp-text = [] 默认：''，输入框内前缀文字
 * @property {String} placeholder-class = [] 默认：''，点位符的自定义类。
 * @property {Array} padding = [] 默认：[32,12]，左右，上下内间距。
 * @property {Function} click 点击输入框时触发发的函数。
 * @property {Function} clear 清空时触发携带相关数据
 * @property {Function} input 输入时触发携带相关数据
 * @example <tm-input ></tm-input>
 *
 */
import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
import tmIcons from "@/tm-vuetify/components/tm-icons/tm-icons.vue"

export default {
	components: {tmSheet, tmIcons},
	name: "tm-input",
	props: {
		//提交表单时的的字段名称
		name: {
			type: String,
			default: ''
		},
		prefixpText: {
			type: String,
			default: ''
		},
		flat: {
			type: Boolean,
			default: false
		},
		maxlength: {
			type: Number,
			default: -1
		},
		black: {
			type: Boolean | String,
			default: null
		},
		//是否显示聚焦状态
		focusShow: {
			type: Boolean | String,
			default: false
		},
		titleFontSize: {
			type: String,
			default: 'n',//同类的字号,xxs,xs,s,n,g,lg,xl
		},
		height: {
			type: Number | String,
			default: 68
		},
		// 校验规则函数。
		verify: {
			type: Function,
			default: function () {
				return (val) => {
					return {
						check: val?.length <= 0 ? false : true,
						text: "必填项不能为空。"
					};
				}
			}
		},
		titleClass: {
			type: String,
			default: 'text-grey-darken-4'
		},
		// 是否是必填。如果必填写将会触发基础的校验，不能为空。
		required: Boolean,
		adjustPosition: Boolean,
		autoFocus: Boolean,
		confirmType: String,
		disabled: Boolean,
		password: Boolean,
		inputType: {
			type: String,
			default: 'text'
		},
		value: {
			type: String | Number,
			default: ''
		},
		// 右边外层后缀图标。
		rightIcon: {
			type: String,
			default: ''
		},
		// 输入框内部前缀图标。
		prefixpIcon: {
			type: String,
			default: ''
		},
		// 左边外层图标。
		leftIcon: {
			type: String,
			default: ''
		},
		// 后缀文字
		suffix: {
			type: String,
			default: ''
		},
		// 输入框后缀图标
		suffixIcon: {
			type: String,
			default: ''
		},
		// 左边标题。
		title: {
			type: String,
			default: ''
		},

		// 输入框文字对齐方式。left,center,right
		align: {
			type: String,
			default: 'left'
		},
		// 显示清除图标。
		clear: Boolean,
		// 主题色名称。
		color: {
			type: String,
			default: 'primary'
		},
		//输入框背景色。grey-lighten-5
		bgColor: {
			type: String,
			default: ''
		},
		// 输入框边框类型主题颜色名称。
		borderColor: {
			type: String,
			default: ''
		},
		// 是否显示下划线
		borderBottom: {
			type: Boolean,
			default: true
		},
		// text输入框文字颜色。
		textColor: {
			type: String,
			default: 'black'
		},
		placeholder: {
			type: String,
			default: "请输入"
		},
		placeholderClass: String,
		// 是否上下排列输入框。
		vertical: Boolean,
		round: {
			type: Number | String,
			default: 2
		},
		bgRound: {
			type: Number | String,
			default: 0
		},
		bgShadow: {
			type: Number | String,
			default: 0
		},
		bgTheme: {
			type: String,
			default: 'white'
		},
		//获取焦点。
		focus: {
			type: Boolean,
			default: false
		},
		padding: {
			type: Array,
			default: () => {
				return [32, 12];
			}
		},
		// 跟随主题色的改变而改变。
		fllowTheme: {
			type: Boolean | String,
			default: true
		}
	},
	data() {
		return {
			showError: false,
			errorText: "请正确填写",
			FOCUS_Auto: false,
			isFocus: false,
		};
	},
	computed: {
		focus_fs: {
			get: function () {
				return this.FOCUS_Auto;
			},
			set: function (val) {
				this.FOCUS_Auto = val;
			}
		},
		black_tmeme: function () {
			if (this.black !== null) return this.black;
			return this.$tm.vx.state().tmVuetify.black;
		},
		color_tmeme: function () {
			if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this.fllowTheme) {
				return this.$tm.vx.state().tmVuetify.color;
			}
			return this.color;
		},
		valueLen: function () {
			// 为了兼容ios不能使用this.valdata.length.
			let p = String(this.valdata);
			return p?.split('').length || 0;
		},
		valdata: {
			get: function () {
				return this.value;
			},
			set: function (val) {
				this.$emit('input', val)
				this.$emit('update:value', val)
				if (this.required) {
					this.$nextTick(function () {
						this.verifyInput();
					})
				}
			}
		}
	},
	mounten() {
		this.FOCUS_Auto = this.focus;
	},
	methods: {
		onclickInput(e) {
			this.$emit('click', e)
		},
		input(e) {
			this.valdata = e.target.value;
		},
		// 校验是否通过。
		verifyInput() {
			let verify = this.verify.call(this, this.valdata || '');
			// #ifdef H5 || APP-VUE
			verify = verify(this.valdata || '')
			// #endif
			if (typeof verify !== 'object') verify = {};
			this.showError = !(verify.check ?? true);
			this.errorText = verify.text ?? "";
			return verify.check ?? true;
		},
		//清除校验显示 的内容。
		clearVerify() {
			this.showError = false;
			this.errorText = "";
		},
		blur(e) {
			this.isFocus = false;
			this.$emit('blur', e)
		},
		focusFun(e) {
			this.isFocus = true;
			this.$emit('focus', e)
		},
		clearVal(e) {
			this.valdata = "";
			this.$emit('clear', this.valdata)
		}
	},

}
</script>

<style lang="scss" scoped>
.tm-input .tm-input-center {
	width: 100%
}

.tm-input .tm-input-center .tm-input-center-wk {
	border: 1px solid #fff;
	transition: all .2s;

}

.tm-input .tm-input-center .tm-input-center-input {
	border: none;
	background: none;
	box-shadow: 0;
	width: 100%
}

.tm-input .tm-input-left {
	flex-shrink: 0;
	height: 100%;
	min-width: 36px;
	padding-right: 10px
}

.tm-input .tm-input-col .tm-input-left{
	max-width: inherit;
	padding-right: 0
}

.tm-input .tm-input-col .tm-input-center .tm-input-center-input{
	height: 40px
}

.tm-input .tm-input-right{
	height: 100%
}
/deep/ .iconfont{
	font-size:32rpx !important;
}
</style>
